<template>
	<view>
		<navigator url="/pages/address/address" class="order-adrs" hover-class="none">
			<view class="order-noadrs" v-if="false">
				<text class="order-noadrs-txt">设置收货地址</text>
				<uni-icons type="right" size="16" color="#c6c6c6"></uni-icons>
			</view>
			<view v-else class="order-isadrs">
				<view class="order-isadrs-l">
					<view class="order-isadrs-top">
						<view>老马</view>
						<text>130****1111</text>
					</view>
					<view class="order-isadrs-ad">吉林省吉林市丰满区xxxxxxx</view>
				</view>
				<uni-icons class="order-isadrs-r" type="right" size="16" color="#c6c6c6"></uni-icons>
			</view>
		</navigator>
		<!-- 支付方式 -->
		<view class="payway">
			<view class="payway-t">支付方式</view>
			<view class="payway-b">
				<view class="payway-b-l">
					<text>微信支付</text>
					<image src="../../static/icon10.png" mode="aspectFit"></image>
				</view>
				<view class="payway-b-r">微信快捷支付</view>
			</view>
		</view>
		<!-- 此处是商品循环体 -->
		<view class="order-shop" v-for="(item,index) in cartStore.cartCheckedList" :key="item.id">
			<view class="order-shop-item">
				<view class="jxtitle">{{item.Titles}}</view>
				<view class="jxspcc">包装规格：{{item.spcc}}</view>
				<view class="order-shop-item-bot">
					<view class="order-shop-item-nums">
						<view>数量：</view><text>{{item.count}}</text>
					</view>
					<view class="order-shop-item-nums">
						<view>单价：</view><text>￥{{Number(item.Price).toFixed(2)}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 此处是商品循环体 END-->
		<view style="height: 110rpx;"></view>
		<view class="order-bots">
			<view class="order-bots-l">
				<view class="info-h1">合计</view>
				<view class="jxprice">¥{{cartStore.cartTotalPrice}}</view>
			</view>
			<button class="order-bots-r" @click="handlePay">去结算</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		useCartStore
	} from '@/store/index'
	const cartStore = useCartStore();
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.order-adrs {
		padding: 20rpx;
		background: $cf;
		margin-bottom: 10rpx;
	}

	.order-noadrs {
		display: flex;
		align-items: center;
		justify-content: space-between;

		&-txt {
			font-size: 26rpx;
			color: $c0;
		}
	}

	.order-isadrs {
		display: flex;
		align-items: center;
		justify-content: space-between;

		&-l {
			overflow: hidden;
		}

		&-top {
			display: flex;
			margin-bottom: 10rpx;

			view {
				font-size: 34rpx;
				color: $c3;
				margin-right: 40rpx;
			}

			text {
				font-size: 32rpx;
				color: $main-color;
			}
		}

		&-ad {
			font-size: 30rpx;
			color: $c6;
		}

		&-r {
			flex-shrink: 0;
			margin-left: 30rpx;
		}
	}

	.payway {
		background: $cf;
		margin-bottom: 10rpx;

		&-t {
			padding: 20rpx;
			border-bottom: 1px solid #f3f3f3;
			font-size: 26rpx;
			color: $c0;
		}

		&-b {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-l {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: $c0;

				image {
					width: 50rpx;
					height: 36rpx;
					margin-left: 30rpx;
				}
			}

			&-r {
				font-size: 26rpx;
				color: $c9;
			}
		}
	}

	.order-shop-item {
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
		background: $cf;

		&-bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&-nums {

			view,
			text {
				display: inline-block;
				vertical-align: middle;
				font-size: 26rpx;
				color: $c9;
			}

			text {
				color: #20b3fb;
			}
		}
	}

	.order-bots {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background: $cf;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;


		.order-bots-l {
			display: flex;
			align-items: center;
			font-size: 36rpx;

			.jxprice {
				font-weight: bold;
				font-size: 36rpx;
				margin-left: 10rpx;
			}
		}

		.order-bots-r {
			background: $main-color;
			border-radius: 5px;
			font-size: 30rpx;
			color: #fff;
			margin: 0;
			padding: 10rpx 25rpx;
			line-height: normal;

			&::after {
				display: none;
			}
		}
	}
</style>